<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<todo>
				<todo-title slot="todo-title" :title="title"></todo-title>
				<todo-items slot="todo-items" v-for="(item.index) in todoItems" 
				            :item="item" v-bind:index="index" v-on:remove="removeItems(index)" key="index"></todo-items>
			</todo>
		</div>
		
		<script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script>
		<script>
			Vue.component("todo",{
				template: '<div>\
				<slot name="todo-title"></slot>\
				<ul>\
					<slot name="todo-items"></slot>\
				</ul>\
				</div>'
			});
			Vue.component("todo-title",{template: '<div>{{title}}</div>'})
			Vue.component("todo-items",{
				props: ['item','index'],
				//只能绑定当前方法
				template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
				methods: {
					remove: function (index) {
						//this.$emit自定义事件分发
						this.$emit('remove',index);
					}
				}
			});	
			var vm = new Vue({
				el: "#app",
				data: {
					title:"语言",
					todoItems: ['Java','Python','C']
				},
				methods: {
					removeItems:function (index) {
						console.log("删除"+this.todoItems[index]+"OK");
						this.todoItems.splice(index,1);//一次删除一个元素
					}
				}
			});
		</script>
	</body>
</html>
